.textbus-form {
  overflow: hidden;
  background-color: $color-lighter;
  font-size: 14px;

  &.textbus-form-flow {
    .textbus-form-group {
      display: block;

      > .textbus-control-label {
        padding-bottom: 5px;
        text-align: left;
      }
    }
  }

  &.textbus-form-inline {
    .textbus-form-group {
      display: inline-flex;
      align-items: center;
      margin-right: 1em;
    }
  }

  &.textbus-form-tool {
    padding: 15px 20px;
    min-width: 160px;
    box-sizing: content-box;
    user-select: none;

    .textbus-form-group {
      padding-left: 0;
      padding-right: 0;
    }

    .textbus-form-control, .textbus-btn {
      padding: 3px 6px;
      font-size: 13px;
    }

    .textbus-btn-wrap .textbus-btn {
      min-width: 46px;
    }

    .textbus-control-label {
      font-weight: bold;
    }

    .textbus-control-static {
      margin: 0;

      label {
        margin-right: 1em;
        display: inline-flex;
        align-items: center;
        cursor: pointer;

        &:last-child {
          margin-right: 0;
        }
      }

      input {
        margin-right: .3em;
      }
    }
  }

  &.textbus-form-workbench {
    min-width: 400px;

    .textbus-form-title {
      background-color: $color-lighter;
      border-bottom: 1px solid $color-light;
      padding: 20px;
      margin: 0;
    }

    .textbus-control-label {
      width: 100px;
    }

    .textbus-btn-wrap {
      margin-top: 15px;
      border-top: 1px solid $color-light;
      text-align: right;
      padding-left: 20px;
      padding-right: 20px;
      background-color: #fff;

      .textbus-btn {
        margin-left: 10px;
      }
    }
  }
}

.textbus-form-groups {
  background-color: $color-lighter;
  padding: 15px 0;
}

.textbus-form-group {
  padding: 5px 20px;
  display: flex;
}

.textbus-control-label {
  display: block;
  text-align: right;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  box-sizing: border-box;
}

.textbus-control-static {
  padding-top: 5px;
  padding-bottom: 5px;
}

.textbus-control-value, .textbus-control-static {
  flex: 1;
  margin: 0;

  > .textbus-form-control {
    width: 100%;
  }
}

.textbus-btn-wrap {
  padding-top: 10px;
  padding-bottom: 10px;
  @include clearfix;
}


.textbus-form-control {
  position: relative;
  outline: none;
  background-color: #fff;
  box-sizing: border-box;
  @include input-style($color-gray, $color-primary);
  @include input-size(5px, 12px, 4px, 14px);
}

.textbus-input-block {
  display: block;
  width: 100%;
}


.textbus-input-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: $line-height;
  padding-left: 8px;
  padding-right: 8px;
  min-width: 32px;
  background-color: #fff;
  @include input-addon-style($color-gray, $color-gray);

  &:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  &:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

@mixin input-group-size($control-font-size, $control-x-padding, $control-y-padding, $controller-radius, $btn-radius, $btn-x-padding, $btn-y-padding, $btn-font-size) {
  font-size: $control-font-size;
  > .textbus-form-control {
    @include input-size($control-y-padding, $control-x-padding, 0, $control-font-size);
  }
  > .textbus-form-control {
    &:first-child {
      border-top-left-radius: $controller-radius;
      border-bottom-left-radius: $controller-radius;
    }

    &:last-child {
      border-top-right-radius: $controller-radius;
      border-bottom-right-radius: $controller-radius;
    }
  }
  > .textbus-btn {
    padding: $btn-y-padding $btn-x-padding;
    font-size: $btn-font-size;

    &:first-child {
      border-top-left-radius: $btn-radius;
      border-bottom-left-radius: $btn-radius;
    }

    &:last-child {
      border-top-right-radius: $btn-radius;
      border-bottom-right-radius: $btn-radius;
    }
  }
}

.textbus-input-group {
  position: relative;
  display: inline-flex;
  font-size: 14px;

  > .textbus-form-control {
    flex: 1;
  }

  > .textbus-form-control, > .textbus-input-addon, > .textbus-btn {
    border-radius: 0;
  }

  > .textbus-form-control, > .textbus-input-addon {
    &:not(:first-child) {
      margin-left: -1px;
    }

    &:first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    &:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }

  > .textbus-btn {
    &:not(:first-child) {
      margin-left: -1px;
    }

    &:first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    &:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
}

@mixin btn-size($name, $v, $h, $font-size, $radius) {
  .textbus-btn-#{$name} {
    padding: $v $h;
    font-size: $font-size;
    border-radius: $radius;
  }
}

@mixin btn-theme($name, $color, $bg-color) {
  .textbus-btn-#{$name} {
    color: $color;
    background-color: $bg-color;
    @if $name != default {
      border: 1px solid $bg-color;
    }

    &:hover {
      background-color: darken($bg-color, 7);
      @if $name != default {
        border-color: darken($bg-color, 7);
      }
    }

    &:focus {
      background-color: darken($bg-color, 10);
      @include focus(if($name == default, $color, $bg-color));
      z-index: 1;
      @if $name != default {
        border-color: darken($bg-color, 7);
      }
    }

    &:active {
      background-color: darken($bg-color, 15);
      @if $name != default {
        border-color: darken($bg-color, 7);
      }
    }

    &[disabled], &[readonly] {
      opacity: .6;
      cursor: not-allowed;

      &:focus, &:hover, &:active {
        background-color: $bg-color;
      }
    }
  }
}

.textbus-btn {
  display: inline-block;
  border: 1px solid $color-gray;
  font-size: 14px;
  cursor: pointer;
  line-height: $line-height;
  text-align: center;
  padding: 5px 12px;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  user-select: none;
  outline: none;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: inherit;

  &[disabled], &[readonly] {
    opacity: .6;
    cursor: not-allowed;
  }

  &[readonly] {
    cursor: default;
  }

  &.textbus-btn-block {
    width: 100%;
    display: block;
  }

  &-loading {
    @keyframes textbus-form-btn-loading {
      0% {
        transform: rotateZ(0deg);
      }
      50% {
        transform: rotateZ(-180deg);
      }
      100% {
        transform: rotateZ(-360deg);
      }
    }

    > span {
      display: inline-block;
      animation: .8s textbus-form-btn-loading linear infinite;
    }
  }
}


@include btn-theme(default, $color-default, $color-lighter);
@include btn-theme(dark, #fff, $color-dark);
@include btn-theme(gray, #fff, $color-gray-dark);
@include btn-theme(primary, #fff, $color-primary);
@include btn-theme(success, #fff, $color-success);
@include btn-theme(info, #fff, $color-info);
@include btn-theme(danger, #fff, $color-danger);
@include btn-theme(warning, #fff, $color-warning);


.textbus-control-feedback-invalid {
  color: $color-danger;
  margin-top: .5em;
  font-size: .9em;
}
